<template>
  <div class="box">
    <header class="header">
      <div @click="goBack" class="iconfont icon-zuojiantou1"></div>
      <div class="right">
        <router-link tag="div" to="" class="iconfont icon-pengyouquan2"></router-link>
        <router-link tag="div" to="" class="iconfont icon-weixin5"></router-link>
        <div @click="getMore" class="iconfont icon-sangedian"></div>
        <mt-actionsheet
          :actions="actions"
          v-model="sheetVisible">
        </mt-actionsheet>
      </div>
    </header>
    <div class="content">
      <div class="head">
        <img src="./../assets/food.jpg" alt="">
        <div class="bottom">
          <p class="skim iconfont icon-yanjing"><span>6244</span></p>
          <p @click="collection" class="collection iconfont icon-xingxing"><span>5431</span></p>
        </div>
      </div>
      <div class="step">
        <div class="head">
          <p class="food_name">豆腐</p>
          <p class="supreme">精品</p>
          <span class="rating">
            <el-rate
              v-model="value5"
              disabled
              show-score
              text-color="#ff9900"
              score-template="{value}分">
            </el-rate>
            <span>5748人评分</span>
          </span>
          <p class="sweet">{{detailList.story}}</p>
        </div>
        <div class="body">
          <div class="head">
            <div class="userinfo">
              <img src="./../assets/food.jpg" alt="">
              <span class="username">{{detailList.username}}</span>
              <span class="follow">关注</span>
            </div>
            <p class="time">时间：1小时以上</p>
            <p class="difficulty">难度：配菜（中级）</p>
          </div>
          <div class="foodlist">
            <h1>食材清单</h1>
            <div v-for="(item, index) of 4" :key="index">
              <span class="stuff">姜</span>
              <span class="gram">20克/个</span>
            </div>
          </div>
          <div class="cook_step">
            <h1>烹饪步骤</h1>
            <div v-for="(itm, index) of 4" :key="index">
              <h2>步骤{{index + 1}}/{{cookStep.length}}</h2>
              <img src="./../assets/food2.jpg" alt="">
              <p class="detail">烹饪步骤烹饪步骤烹饪步骤烹饪步骤烹饪步骤烹饪步骤烹饪步骤烹饪步骤</p>
            </div>
            <div class="tips">
            </div>
            <div class="time">发布于 2018-12-21</div>
          </div>
        </div>
      </div>
      <router-link tag="p" to="/updateworks" class="updata iconfont icon-xiangji2"> 上传作品</router-link>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import axios from 'axios'
import { Actionsheet } from 'mint-ui'
Vue.use(Actionsheet)
export default {
  data () {
    return {
      value5: 4.9,
      detailList: [],
      disheList: [],
      cookStep: [],
      actions: [{
        name: '朋友圈快照',
        icon: '',
        method: this.takephoto1
      }, {
        name: '微信快照',
        icon: '',
        method: this.takephoto2
      }, {
        name: '朋友圈',
        icon: '',
        method: this.takephoto2
      }, {
        name: '微信',
        icon: '',
        method: this.takephoto2
      }, {
        name: '新浪微博',
        method: this.takephoto2
      }, {
        name: 'QQ好友',
        icon: '',
        method: this.takephoto2
      }, {
        name: '保存快照',
        icon: '',
        method: this.takephoto2
      }, {
        name: '举报',
        icon: '',
        method: this.takephoto2
      }],
      sheetVisible: false,
      colletnum: '',
      id: ''
    }
  },
  methods: {
    goBack () {
      this.$router.go(-1)
    },
    collection () {
      console.log(11)
      // this.colletnum++
      // return axios.get(`http://10.8.162.81:8082/greens/growColletnum?colletnum=${colletnum}&id=&{id}`).then(data => {
      //   console.log(data)
      // })
      console.log(this.id)
    },
    getMore () {
      this.sheetVisible = !this.sheetVisible
    }
    // takephoto1 () {
    //   console.log('拍照')
    // },
    // takephoto2 () {
    //   console.log('相册选取')
    // }
  },
  created () {
    // console.log(this.$route.query)
    // const {id} = this.$route.query
    // // axios.get(`http://10.8.162.94:8082/greens/getGreensById?id=${id}`)
    //   .then(data => {
    //     this.detailList = data.data.data[0]
    //     this.cookStep = data.data.data[0].steps
    //     this.disheList = data.data.data[0].dishes
    //     this.colletnum = data.data.data[0].colletnum
    //     // console.log(this.colletnum)
    //     // console.log(this.cookStep)
    //   })
  }
}

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.box {
  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    &:first-child div {
      margin-left: 15px;
    }
    .iconfont {
      font-size: 18px;
    }
    .right {
      display: flex;
      margin-right: 20px;
      align-items: center;
      div {
        margin-left: 15px;
      }
      .icon-pengyouquan2 {
        font-size: 24px;
      }
      .mint-actionsheet {
        margin: 0 auto 10px;
        width: 95%;
        border-radius: 5px;
        .mint-actionsheet-list {

        }
      }
    }
  }
  .content {
    .head {
      position: relative;
      img {
        width: 100%;
        height: 250px;
      }
      .bottom {
        display: flex;
        align-items: center;
        position: absolute;
        bottom: 5px;
        right: 15px;
        color: #fff;
        span, .iconfont {
          margin-left: 5px;
          font-size: 12px;
        }
        .skim {
          margin-right: 10px;
        }
        .collection {
        }
      }
    }
    .step {
      width: 90%;
      margin: 20px auto;
      .head {
        .food_name {
          font-size: 18px;
          font-weight: 800;
          padding-bottom: 20px;
        }
        .supreme {
          padding: 5px 8px;
          background: rgb(241, 200, 14);
          display: inline-block;
          margin: 10px 0;
          color: #fff;
          border-radius: 3px;
          font-size: 12px;
        }
        .rating {
          
          div {
            display: flex;
            align-items: baseline;
          }
          span {
            margin-bottom: 10px;
            display: block;
            font-size: 12px;
          }
        }
        .sweet {
          line-height: 22px;
          border-bottom: 1px solid #ccc;
          padding: 10px 0 30px 0;
        }
      }
      .body {
        margin-top: 20px;
        
        .head {
          border-bottom: 1px solid #ccc;
          .userinfo {
            margin-bottom: 10px;
            img {
              width: 30px;
              height: 30px;
              border-radius: 50%;
            }
            .username {
              font-size: 18px;
              margin-left: 5px;
            }
            .follow {
              float: right;
              background: rgb(236, 221, 10);
              color: #fff;
              border-radius: 15px;
              padding: 2px 15px;
            }
          }
          .time {
            margin-bottom: 10px;
            font-size: 12px;
          }
          .difficulty {
            margin-bottom: 10px;
            font-size: 12px;
          }
        }
        .foodlist {
          padding: 20px 0;
          border-bottom: 1px solid #ccc;
          h1 {
            margin-bottom: 10px;
          }
          div {
            display: flex;
            justify-content: space-between;
            line-height: 30px;
            span:nth-child(2) {
              margin-right: 30px;
            }
          }
        }
        .cook_step {
          padding: 20px 0 40px 0;
          border-bottom: 1px solid #ccc;
          h1 {
            margin-bottom: 10px;
          }
          div {

            h2 {
              margin: 10px 0;
            }
            img {
              width: 100%;
              height: 200px;
              border-radius: 5px;
            }
            .detail {
              margin-top: 10px;
              font-size: 14px;
            }
          }
          .tips {
          }
          .time {
            margin-top: 20px;
            font-size: 12px;
            color: #999;
          }
        }
      }
    }
    .updata {
      font-size: 12px;
      width: 90%;
      height: 30px;
      background: rgb(228, 182, 33);
      color: #fff;
      margin: 50px auto;
      border-radius: 20px;
      line-height: 30px;
      text-align: center;
      font-weight: 100;
    }
  }
}
</style>